<template>
  <div class="goodsDetail">
    <div class="goodsDetail-border">
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">出库编码：</div>
          <div class="w320">{{ formInfo.Code }}</div>
        </div>
        <div class="mr20">
          <div class="w130">出库名称：</div>
          <div class="w320">{{ formInfo.FullName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">出库单号：</div>
          <div class="w320">{{ formInfo.OBNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">出库类型：</div>
          <div class="w320">
            {{ formInfo.OBType === '1' ? '委托仓储出库' : '' }}
          </div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">用料单位：</div>
          <div class="w320">{{ formInfo.POUnit }}</div>
        </div>
        <div class="mr20">
          <div class="w130">发料库点：</div>
          <div class="w320">{{ formInfo.WHName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">发料日期：</div>
          <div class="w320">{{ formInfo.DeliveryDate }}</div>
        </div>
        <div class="mr20">
          <div class="w130">收货状态：</div>
          <div class="w320">
            {{ formInfo.ReceiveStatus === '1' ? '已出库' : '未出库' }}
          </div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">项目名称：</div>
          <div class="w320">{{ formInfo.ProName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">子项目名称：</div>
          <div class="w320">{{ formInfo.CProName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">自定义编号：</div>
          <div class="w320">{{ formInfo.CustomNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">车牌号：</div>
          <div class="w320">{{ formInfo.CarNum }}</div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">合计重量：</div>
          <div class="w320">{{ formInfo.TotalWeight }}</div>
        </div>
        <div class="mr20">
          <div class="w130">合计采保费：</div>
          <div class="w320">{{ formInfo.TotalSafeAmt }}</div>
        </div>
        <div class="mr20">
          <div class="w130">合计检测费：</div>
          <div class="w320">{{ formInfo.TotalCheckAmt }}</div>
        </div>
        <div class="mr20">
          <div class="w130">装卸费：</div>
          <div class="w320">{{ formInfo.TotalPackAmt }}</div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">单据单号：</div>
          <div class="w320">{{ formInfo.SourceBillNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">收货人：</div>
          <div class="w320">{{ formInfo.Receiver }}</div>
        </div>
        <div class="mr20">
          <div class="w130">大类号：</div>
          <div class="w320">{{ formInfo.LCNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">总金额：</div>
          <div class="w320">{{ formInfo.TotalAmt }}</div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">说明：</div>
          <div class="w320">{{ formInfo.Remark }}</div>
        </div>
      </div>
    </div>
    <div class="tableDetail">
      <el-table
        border
        :data="tableData"
        :header-cell-style="headerCellStyle"
        show-summary
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column label="批次号">
          <template #default="{ row }">
            <div>{{ row.BatchNo }}</div>
          </template>
        </el-table-column>
        <el-table-column label="物料编码">
          <template #default="{ row }">
            <div>{{ row.ItemCode }}</div>
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template #default="{ row }">
            <div>{{ row.ItemName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="物料规格">
          <template #default="{ row }">
            <div>{{ row.ItemSepc }}</div>
          </template>
        </el-table-column>
        <el-table-column label="物料描述">
          <template #default="{ row }">
            <div>{{ row.ItemDescription }}</div>
          </template>
        </el-table-column>
        <el-table-column label="辅助物料描述">
          <template #default="{ row }">
            <div>{{ row.AItemDescription }}</div>
          </template>
        </el-table-column>
        <el-table-column label="单位" width="60">
          <template #default="{ row }">
            <div>{{ row.ItemUnit }}</div>
          </template>
        </el-table-column>
        <el-table-column label="实发数量" prop="Qty" width="60" />
        <el-table-column label="单价" prop="Price" width="60" />
        <el-table-column label="辅助计量单位">
          <template #default="{ row }">
            <div>{{ row.AItemUnit }}</div>
          </template>
        </el-table-column>
        <el-table-column label="辅助计量单位数量" prop="AItemQty" />
        <el-table-column label="实收件数" prop="ActualNum" width="60" />
        <el-table-column label="料款金额（元）" prop="ItemAmt" width="90" />
        <el-table-column label="运杂费（元）" prop="PackAmt" width="80" />
        <el-table-column label="采保费率" width="60">
          <template #default="{ row }">
            <div>{{ row.SafeRate }}</div>
          </template>
        </el-table-column>
        <el-table-column label="料款及运杂费小计" prop="ItemPackAmt" />
        <el-table-column label="四号定位" width="60">
          <template #default="{ row }">
            <div>{{ row.FourNo }}</div>
          </template>
        </el-table-column>
        <el-table-column label="工作单号" width="60">
          <template #default="{ row }">
            <div>{{ row.WorkNo }}</div>
          </template>
        </el-table-column>
        <el-table-column label="库存备注">
          <template #default="{ row }">
            <div>{{ row.StockRemark }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
      fromprint: {
        type: String,
        default: '',
      },
      chileddetail: {
        type: Array,
        default: () => {
          return []
        },
      },
      supplierdata: {
        type: Array,
        default: () => {
          return []
        },
      },
      isprint: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['deletedchild'],
    data() {
      return {
        ItemList: [],
        itemChiledList: [],
        WmsData: [], // 选择物资数据
        formInfo: this.form,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageNo: 1,
        pageSize: 10,
        radio: '',
        options: [],
        deleArr: [],
        tableData: this.chileddetail,
        searchChild: '',
        IsPrint: this.isprint,
        headerCellStyle: {
          background: '#ffffff !important',
          color: '#000000',
          'border-bottom': '1px solid #000000',
        },
      }
    },
    watch: {
      chileddetail(val) {
        console.log(val)
        this.tableData = val
      },
    },
    methods: {},
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    font-size: 16px;
    height: 600px;

    .goodsDetail-border {
      border: 1px solid #000000;
      .border-div {
        border-bottom: 1px solid;
        padding: 10px;
      }
      .border-div:last-child {
        border: none;
      }
    }
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    margin-right: 20px;
  }
  .w130 {
    display: inline-block;
    width: 130px;
    text-align: right;
  }
  .w320 {
    display: inline-block;
    width: 180px !important;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }

  /**
改变边框颜色
 */
  ::v-deep .el-table--border,
  .el-table--group {
    border: 1px solid #000 !important;
  }
  /**
改变表格内竖线颜色
 */
  ::v-deep .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid #000 !important;
  }
  /**
改变表格内行线颜色
 */
  ::v-deep .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid #000 !important;
  }

  ::v-deep .el-table thead tr th {
    border-color: #000;
  }
  /* g改变表头字体颜色 */
  ::v-deep .el-table thead {
    color: #000000;
  }
  @media print {
    @page {
      page-size: A4;
    }

    .goodsDetail {
      /* margin: 20cm; */
      margin: 0 auto;
      /* 打印时缩放，防止页面溢出 */
      zoom: 0.73;
    }
    .cover {
      display: block;
    }
    tr {
      /* 行被截断时自动换行 */
      page-break-before: always;
      page-break-after: always;
      page-break-inside: avoid;
    }
  }
</style>
